<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />

    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body class="contentPadding">
<div class="from_control form-timeline clearfix">
    <div class="from_control_l">
        <div class="toggle_process">
            <span class="label_on fl margin-right-10">显示流程名:</span>
            <input name="status" type="checkbox" data-type="reload" data-size="mini">
        </div>
        <div class="mt-checkbox-box">
            <label class="mt-checkbox mt-checkbox-outline"> 开启数据量监控
                <input type="checkbox" value="1" name="test" checked="checked"/>
                <span></span>
            </label>
        </div>

        <div class="toggle_on">
            <input name="status2" type="checkbox" data-type="reload" data-size="mini">
        </div>

        <div  class="timelineBox margin-left-20">
            <div class="cd-horizontal-timeline mt-timeline-horizontal" data-spacing="60">
                <div class="timeline">
                    <div class="events-wrapper">
                        <div class="events">
                            <ol>
                                <li>
                                    <a href="#0" data-date="11/05/2018" class="border-after-red bg-after-red selected">5.11</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="10/05/2018" class="border-after-red bg-after-red">5.10</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="09/05/2018" class="border-after-red bg-after-red">5.9</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="08/05/2018" class="border-after-red bg-after-red">5.8</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="07/05/2018" class="border-after-red bg-after-red">5.7</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="06/05/2018" class="border-after-red bg-after-red">5.6</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="05/05/2018" class="border-after-red bg-after-red">5.5</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="04/05/2018" class="border-after-red bg-after-red">5.4</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="03/05/2018" class="border-after-red bg-after-red">5.3</a>
                                </li>
                                <li>
                                    <a href="#0" data-date="02/05/2018" class="border-after-red bg-after-red">5.2</a>
                                </li>
                                <li>
                                    <a href="#0" id="test_pest" data-date="01/05/2018" class="border-after-red bg-after-red">5.1</a>
                                </li>
                            </ol>
                            <span class="filling-line bg-skyblue" aria-hidden="true"></span>
                        </div>
                        <!-- .events -->
                    </div>
                    <!-- .events-wrapper -->
                    <ul class="cd-timeline-navigation mt-ht-nav-icon">
                        <li>
                            <a href="#0" class="prev inactive btn btn-outline red md-skip">
                                <i class="fa fa-chevron-left"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#0" class="next btn btn-outline red md-skip">
                                <i class="fa fa-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- .cd-timeline-navigation -->
                </div>
                <!-- .timeline -->

                <!-- .events-content -->
            </div>
        </div>
    </div>

</div>
<div class="contentChained">
    <iframe src="../assets/custom/draw/fieldRelationEr.html" frameborder="0" width="100%" height="100%"></iframe>
</div>
</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="../assets/pages/scripts/components-bootstrap-switch.min.js"></script>
<script src="../assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
<script>

    $('[name="status"]').bootstrapSwitch({
        onText:"ON",
        offText:"OFF",
        state:true,
        onColor:"success",
        offColor:"default",
        onSwitchChange:function(event,state){
            if(state===true){
                console.log(true)
            }else{
                console.log(false)

            }
        }
    });
    $('[name="status2"]').bootstrapSwitch({
        onText:"增量",
        offText:"全量",
        state:true,
        onColor:"success",
        offColor:"default",
        onSwitchChange:function(event,state){
            if(state===true){
                console.log(true)
            }else{
                console.log(false)
            }
        }
    });

    $('input[name = test]').click(function () {
        $('.toggle_on').toggleClass('opacity_none');
        $('.timelineBox').toggleClass('opacity_none');
    })



</script>
</html>